<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 添加试题 -->
      <div class="addQuestions">
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="$router.push({ path: '/questions/new' })"
          >新增试题</el-button
        >
      </div>
      <!-- 选择器 -->
      <el-form :inline="true" :model="questionsForm" ref="ruleForm" >
        <!-- 第一行 -->
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="questionsForm.subjectID" placeholder="请选择">
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.subjectName"
                  :value="item.id"
                  @click.native="selectQuest(item.id)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="questionsForm.catalogID" placeholder="请选择">
                <el-option
                  v-for="(item, index) in secondlevel"
                  :key="index"
                  :label="item.directoryName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="questionsForm.tags" placeholder="请选择">
                <el-option
                  v-for="(item, index) in tagsdatas"
                  :key="index"
                  :label="item.tagName"
                  :value="item.id"
                  @click.native="getTags()"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                class="inputSelect"
                v-model="questionsForm.keyword"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                v-model="questionsForm.questionType"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in questionList"
                  :key="index"
                  :label="item.label"
                  :value="item.quesvalue"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                v-model="questionsForm.difficulty"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in difficultyList"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="questionsForm.direction" placeholder="请选择">
                <el-option
                  v-for="(item, index) in directionList"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="questionsForm.creatorID" placeholder="请选择">
                <el-option
                  v-for="(item, index) in userListInfo"
                  :key="index"
                  :label="item.username"
                  :value="item.username"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input
                class="inputSelect"
                v-model="questionsForm.remarks"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input
                class="inputSelect"
                v-model="questionsForm.shortName"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" class="cityForm">
              <el-select
                v-model="questionsForm.province"
                placeholder="请选择"
                style="width: 35%"
              >
                <el-option
                  v-for="(item, index) in provincesList"
                  :key="index"
                  :label="item"
                  :value="index"
                  @click.native="provincesSelect(item)"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="questionsForm.city"
                placeholder="请选择"
                style="width: 35%; margin-left: 15px"
              >
                <el-option
                  v-for="(item, index) in citysList"
                  :key="index"
                  :label="item"
                  :value="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><el-form-item>
              <el-button size="mini" @click="deleteAll">清空</el-button>
              <el-button size="mini" type="primary" @click="selectFrom"
                >查询</el-button
              >
            </el-form-item></el-col
          >
        </el-row>
      </el-form>
      <!-- 通知 -->
      <div class="inform">
        <el-alert
          :title="'共有' + total + '条信息'"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>
      </div>
      <!-- 基础题库表格信息 -->
      <el-table :data="questionsList.items" style="width: 100%" >
        <el-table-column
          prop="number"
          align="center"
          label="试题编号"
          width="250"
        >
        </el-table-column>
        <el-table-column prop="subject" align="center" label="学科" width="80">
        </el-table-column>
        <el-table-column prop="catalog" align="center" label="目录" width="150">
        </el-table-column>
        <el-table-column
          prop="direction"
          align="center"
          label="题型"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-if="scope.row.questionType === '2'">多选</span>
            <span v-if="scope.row.questionType === '3'">简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" align="center" >
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入时间" width="200">
          <template slot-scope="scope">
            <div>{{ scope.row.addDate | parseTimeByString }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          align="center"
          label="难度"

        >
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty === '1'">简单</span>
            <span v-if="scope.row.difficulty === '2'">一般</span>
            <span v-if="scope.row.difficulty === '3'">困难</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creator"
          align="center"
          label="录入人"

        ></el-table-column>
        <el-table-column align="center" label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-view"
              circle
              @click="showdialog(scope.row)"
            ></el-button>
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="$router.push({ path: '/questions/new',query: {id:scope.row.id} })"
              circle
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-check"
              @click="addchoiceItem(scope.row.id)"
              circle
            ></el-button>

            <el-button
              type="info"
              icon="el-icon-delete"
              circle
              @click="removeQuestions(scope.row.id)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="questionsForm.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="questionsForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 预览对话框 -->
      <el-dialog :visible.sync="dialogVisible" title="预览题目">
        <questions-preview :item="item" v-if="dialogVisible"></questions-preview>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects'
import { list as directoryList } from '@/api/hmmm/directorys'
import { list as tagsList } from '@/api/hmmm/tags'
import { list as userList } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import {
  list as asquestionsList,
  remove,
  choiceAdd
} from '@/api/hmmm/questions'
import questionsPreview from '../components/questions-preview'
export default {
  components: {
    'questions-preview': questionsPreview
  },
  data () {
    return {
      // 携带给弹出框的参数
      item: {},
      // 题库管理数据源
      questionsForm: {
        subjectID: '',
        catalogID: '',
        tags: '',
        questionType: '',
        difficulty: '',
        direction: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        creatorID: ''
      },
      // 题目预览弹出框
      dialogVisible: false,
      // 学科数据源
      options: [],
      // 二级目录数据源
      secondlevel: [],
      // 标签数据源
      tagsdatas: [],
      // 题目类型数据源
      questionList: [
        { label: '单选', quesvalue: 1 },
        { label: '多选', quesvalue: 2 },
        { label: '简答', quesvalue: 3 }
      ],
      // 题目难度数据源
      difficultyList: [
        { label: '简单', diffvalue: 1 },
        { label: '一般', diffvalue: 2 },
        { label: '困难', diffvalue: 3 }
      ],
      // 方向
      directionList: [
        { label: 'o2o', direcvalue: 1 },
        { label: '外包服务', direcvalue: 2 },
        { label: '企业服务', direcvalue: 3 },
        { label: '互联网金融', direcvalue: 4 },
        { label: '企业咨询', direcvalue: 5 },
        { label: '互联网', direcvalue: 6 },
        { label: '电子商务', direcvalue: 7 },
        { label: '其他', direcvalue: 8 }
      ],
      // 录入人数据源
      userListInfo: [],
      // 一级城市数据源
      provincesList: [],
      // 二级城市数据源
      citysList: [],
      // 基础题库数据源
      questionsList: {},
      // 总条数
      total: 0,
      queryInfo: {
        page: 1,
        pagesize: 10
      },
      subjectsID: null
    }
  },
  methods: {
    // 学科列表
    async getQuestionBank () {
      const { data: res } = await list({ pagesize: 20 })
      this.options = res.items
    },
    // 二级目录下拉选择的值
    async selectQuest (id) {
      this.subjectsID = id
      const { data: res } = await directoryList({ subjectID: this.subjectsID })
      this.secondlevel = res.items
      // 获取二级目录
      this.getTags()
    },
    // 获取标签
    async getTags () {
      const { data: res } = await tagsList({ subjectID: this.subjectsID })
      this.tagsdatas = res.items
    },
    // 获取录入人
    async getUserinfo () {
      const { data: res } = await userList()
      this.userListInfo = res.list
    },
    // 获取城市
    async getprovinces () {
      const res = await provinces()
      this.provincesList = res
    },
    // 获取二级地区
    async provincesSelect (item) {
      const res = await citys(item)
      this.citysList = res
    },
    // 获取基础题库列表
    async getasquestions () {
      const { data: res } = await asquestionsList(this.queryInfo)
      this.questionsList = res

      this.total = res.counts
    },
    // 页面条数改变时触发
    handleSizeChange (newpagesize) {
      this.queryInfo.pagesize = newpagesize
      this.getasquestions()
    },
    // 页数改变时触发
    handleCurrentChange (newpage) {
      this.queryInfo.page = newpage
      this.getasquestions()
    },
    // 查询
    async selectFrom () {
      // const { data: res } = await asquestionsList(this.questionsForm)
      // this.questionsList = res
      // this.total = res.counts
      const data = this.questionsForm
      for (const key in data) {
        if (data[key] === '') {
          delete data[key]
        }
      }
      const { data: res } = await asquestionsList({
        ...data,
        ...this.queryInfo
      })
      this.questionsList = res
      this.total = res.counts
    },
    // 清空
    deleteAll () {
      this.questionsForm = {}
      this.getasquestions()
    },
    // 删除题库
    async removeQuestions (id) {
      const that = this
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          await remove({ id: id })
          that.getasquestions()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    showdialog (row) {
      this.item = {
        id: row.id,
        number: row.number
      }
      this.dialogVisible = true
    },
    addchoiceItem (id) {
      const that = this
      this.$confirm('是否加入精选题库?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async () => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          await choiceAdd({ id: id, choiceState: 1 })
          that.getasquestions()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消添加'
          })
        })
    }
  },
  created () {
    this.getQuestionBank()
    this.getUserinfo()
    this.getprovinces()
    this.getasquestions()
  },
  mounted () {}
}
</script>

<style scoped lang="scss">
body {
  min-width: 1400px;
}
.container {
  min-width: 900px;
  padding: 10px;
  // .el-card {
  //   min-width: 100vh;

  .el-card {
    min-width: 100%;
  }
  .addQuestions {
    position: relative;
    top: 0;
    left: 0;
    height: 40px;
    width: 100%;
    margin-bottom: 10px;
    .el-button {
      position: absolute;
      right: 0;
    }
  }
  .inputSelect {
    width: 300px;
  }
  .el-select {
    width: 300px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-radius: 4px;
    min-height: 36px;
    span {
      padding-right: 20px;
    }
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-col {
    display: flex;
    justify-content: flex-end;
  }
  .inform {
    margin-bottom: 20px;
  }
  .cityForm {
    position: relative;
    ::v-deep .el-form-item__content {
      display: flex;
      justify-content: flex-end;
    }
    ::v-deep.el-form-item__label {
      position: absolute;
      left: 50px;
    }
  }
  .pagination {
    display: flex;
    margin-top: 20px;
    justify-content: flex-end;
  }

}
</style>
